<template>
  <view class="main">
    <!-- 用户头像 -->
    <view class="avatar">
      <u-avatar :src="userInfo.headimage" size="70"></u-avatar>
    </view>
    <!-- 用户昵称 -->
    <view class="username">
      <view v-if="token">
        {{ userInfo.nickName || "暂未设置" }}
      </view>
      <view v-else class="login-box" @click="toLogin"> 一键登录 </view>
    </view>
    <view class="zhenliao">
      <view @click="totreatment(1)">
        <view class="number">
          {{ statistics.acceptCount || 0 }}
        </view>
        <view style="font-size: 28rpx"> 在线问诊 </view>
      </view>
      <view @click="totreatment(2)">
        <view class="number">
          {{ statistics.visitCount || 0 }}
        </view>
        <view style="font-size: 28rpx"> 上门治疗 </view>
      </view>
    </view>
    <view class="phone">
      <text>手机号</text>
      <text>{{ userInfo.phone | maskPhone }}</text>
    </view>
    <view class="phone">
      <text>所属区域</text>
      <text>{{ userInfo.region || "暂未设置" }}</text>
    </view>
    <!-- 功能 -->
    <view style="margin-top: 20rpx">
      <uni-list :border="false">
        <uni-list-item title="在线联系" showArrow link @click="showPhoneDialog"
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/zhangdan.png"></uni-list-item>
        <uni-list-item title="账单记录" showArrow link
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/yisheng.png"
          @click="toDetail(1)"></uni-list-item>
        <uni-list-item title="我的医生" showArrow link @click="toDetail(2)"
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/zhangdan.png"></uni-list-item>
        <uni-list-item title="我的病历" showArrow link @click="toDetail(3)"
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bingli.png"></uni-list-item>
        <uni-list-item title="注册协议" showArrow link @click="tProtocol(1)"
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/bingli.png"></uni-list-item>
        <uni-list-item title="隐私协议" showArrow link @click="tProtocol(2)"
          thumb="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/my/zhangdan.png"></uni-list-item>
      </uni-list>
    </view>
    <!-- <view style="margin-top: 20rpx">
      <uni-list :border="false">
        <uni-list-item
          title="退出登录"
          showArrow
          @click="logout"
          link
          v-if="token"
        ></uni-list-item>
      </uni-list>
    </view> -->
    <!-- <view v-if="token" class="login-btn" @click="wxGetUserInfo">
      修改个人信息
    </view> -->

    <uni-popup ref="phonePopup" type="center">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="拨打电话" title="联系电话" content="13572116118"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  setToken,
  getToken,
  removeToken
} from "@/utils/auth.js"
import {
  imageUrl
} from '@/config.js'
import {
  getwxOpenId,
  wxOpenIdLogin,
  getUserMessage
} from "@/api/feixiang/application.js"
import {
  getLoginUserMessgae,
} from "../../api/index.js";
export default {
  data() {
    return {
      phone: '',
      role: '',
      userInfo: {},
      token: '',
      phoneNumber: "13572116118",
      statistics: {}
    }
  },
  onLoad() {
    this._getUserMessage()
  },
  destroyed() {
    console.log('页面销毁');

  },
  mounted() {
    console.log('页面加载');
  },
  onShow() {
    this._getUserMessage()
  },
  created() {
    console.log('页面创建');
    this._getUserMessage()
    this._getStatistics()
    // this.getToken()
    this.token = getToken()
  },
  filters: {
    filterUrl(val) {
      if (!val) {
        return imageUrl +
          '/profile/avatar/2022/11/19/e7MMHQucVQFg657700a96022645bd964aa0b33d76e23_20221119094612A008.png'
      } else {
        return val
      }
    },
    maskPhone(phone) {
      return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : "暂未设置"
    }
  },
  methods: {
    logout() {
      removeToken();
      uni.removeStorageSync('USER_ID')
      uni.setStorageSync("nav_to_index_index", 1);
      uni.reLaunch({ url: "/pages/index/index" });
    },
    dialogClose() {
      console.log("点击关闭");
    },
    hidePhoneDialog() {
      this.$refs.phonePopup.close();
    },
    showPhoneDialog() {
      this.$refs.phonePopup.open();
    },
    dialogConfirm() {
      this.$refs.phonePopup.close();
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber, // 这里填入你要拨打的电话号码
      });
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber, // 这里填入你要拨打的电话号码
      });

      //this.hidePhoneDialog(); // 拨打电话后关闭弹窗
    },
    toCouponList() {
      uni.navigateTo({
        url: "/nursingWorkerPages/pages/coupon/coupon",
      });
    },
    // 获取code
    getToken() {
      wx.login({
        success: async res => {
          console.log(res, '获取code');
          const code = res.code
          const res2 = await getwxOpenId({
            code,
          })
          console.log(res2, '获取wxOpenId');
          const wxOpenId = res2.data.wxOpenId
          uni.setStorageSync('openid_key', wxOpenId)
          const res3 = await wxOpenIdLogin({
            openid: wxOpenId,
          })
          setToken(res3.data.token)
          this._getUserMessage()
          // console.log(res3,222);
        }
      })
    },
    // 统计信息
    async _getStatistics() {
      const res = await getLoginUserMessgae()
      this.statistics = res.data
    },
    async _getUserMessage() {
      const res = await getUserMessage()
      console.log(res);
      this.userInfo = res.data
      if (this.userInfo.region) {
        uni.setStorageSync('region', this.userInfo.region)
        uni.setStorageSync('USER_ID', this.userInfo.userId)
        uni.setStorageSync('ROLES', this.userInfo.roles)
      } else {
        uni.setStorageSync('region', '')
      }
    },
    wxGetUserInfo() {
      uni.navigateTo({
        url: "/pages/feixiang/login/getMess"
      })
    },
    toLogin() {
      uni.navigateTo({
        url: "/sickbed/pages/feixiang/login/login"
      })
    },
    toDetail(e) {
      if (e == 1) {
        //账单记录
        uni.navigateTo({
          url: "../my/billing-records?money=" + this.statistics.money,
        });
      }
      if (e == 2) {
        //我的医生
        uni.navigateTo({
          url: "../my/mydoctor",
        });
      }
      if (e == 3) {
        //我的病历
        uni.navigateTo({
          url: "../my/medical-record",
        });
      }
    },
    //诊疗
    totreatment(category) {
      uni.navigateTo({
        url: "../my/treatmentrecords?category=" + category,
      });
    },
    //查看协议
    tProtocol(e) {
      uni.navigateTo({
        url: "/chronicDisease/pages/login/agreement?category=" + e,
      });
    },

  }
}
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
::v-deep.uni-list {
  padding: 0 22rpx !important;
}

.phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 4rpx solid #f7f7f7;
  font-size: 28rpx;
  padding: 24rpx 50rpx;
  background-color: #fff;
}

.login-btn {
  position: fixed;
  bottom: 120rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  background-color: #00bcb2;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
}

.login-box {
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  background-color: #00bcb2;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
  font-weight: 700;
}

.main {
  padding-top: 58rpx;
}

.avatar {
  display: flex;
  justify-content: center;
}

.username {
  width: 100%;
  font-size: 40rpx;
  margin-top: 28rpx;
  margin-bottom: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ipt {
  padding: 0 32rpx;
}

.phone-ipt {
  border-bottom: 2rpx solid #f7f7f7;
  position: relative;
}

.phone-ipt-text {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  font-size: 32rpx;
}

.role-ipt {
  border-bottom: 2rpx solid #f7f7f7;
  position: relative;
}

.role-ipt-text {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  font-size: 32rpx;
}

.zhenliao {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 196rpx;
  background-color: #fff;
  border-radius: 24rpx;
  margin-bottom: 20rpx;

  >view {
    text-align: center;
  }

  .number {
    margin-top: 38rpx;
    margin-bottom: 20rpx;
    color: #3fa3fa;
    font-size: 44rpx;
    font-weight: 600;
  }
}

.bianji {
  position: absolute;
  right: 50rpx;
  top: 50rpx;

  >image {
    width: 56rpx;
    height: 56rpx;
  }
}
</style>
